<template>
  <!-- 单个商品 -->
  <div class="settlement">
    <div class="btn">
      <van-checkbox v-model="checkbox" shape="square" />
    </div>
    <div class="content">
      <div class="image">
        <img referrerpolicy="no-referrer" :src="cc.img" alt="" />
      </div>
      <div class="text">
        <van-icon name="delete-o" @click="deleId" size=".39rem" />
        <div class="name">{{cc.Cpmc}}</div>
        <div class="btn">
          <span>数量</span>
          <van-stepper v-model="stepper"  />
        </div>
        <div class="price">￥{{pric}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Lsettlement",
  props: {
    const: Object,
    index:Number,
  },
  data() {
    return {
      checkbox: true, //判断是否选中
      stepper: 1, //计数器
      cc:{},
      pric:123,
      pric2:0
    };
  },
  created() {
    this.cc = this.const;
    this.pric = this.const.Price;
    this.pric2 = this.const.Price;
    this.stepper=this.const.count
    // console.log(this.const);
    // 初始化修改结算总和

  },
  mounted(){
    // console.log(this.index);
    // this.$store.commit('PriceHe',this.pric)
    
  },
  watch:{
    checkbox(){
      // if(this.checkbox){
        // console.log(this.checkbox,this.index);
        this.$store.commit('setFlag',this.index)
      // }
    },
    stepper(){
      let pric = this.pric2;
      let num = this.stepper;
      let he = pric*num;
      // console.log(he);
      this.pric = he;
      this.$store.commit('CountHe',{index:this.index,count:this.stepper})
      // this.$emit('he',he);
      // this.$store.commit('PriceHe',he)
    }
  },
  methods: {
    deleId() {
      // console.log(this.$store.state.shopping.length);
      // if(this.$store.state.shopping.length){
        // console.log("删除");
        this.$store.commit('del',this.index)
      // } 
      
    },
    
  },
};
</script>

<style scoped lang="less">
.settlement {
  display: flex;
  padding-top: 0.2rem;
  height: 2.58rem;
  align-items: center;
  background-color: #fff;
  .content {
    width: 6.62rem;
    height: 2.28rem;
    border-bottom: solid 0.01rem #ccc;
    padding-bottom: 0.3rem;
    display: flex;
    .text {
      padding-left: 0.2rem;
      width: 4rem;
      position: relative;
      .van-icon {
        position: absolute;
        top: 0.1rem;
        right: 0rem;
      }
      .price {
        margin-top: 1rem;
        color: rgb(254, 143, 40);
      }
      .btn {
        width: 100%;
        height: 0.5rem;
        display: flex;
        align-items: center;
        span {
          font-size: 0.25rem;
          padding-right: 0.3rem;
        }
      }
      .name {
        height: 0.48rem;
        font-size: 0.36rem;
        overflow: hidden;
      }
    }
    .image {
      img {
        width: 2.08rem;
        height: 2.26rem;
      }
    }
  }
  .btn {
    width: 0.66rem;
    padding-left: 0.22rem;
  }
}
</style>